<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('基于图书的协同过滤推荐')">
	<meta charset="UTF-8"/>
	<style type="text/css">
	td, th {
		display: block;
	}
	</style>
</head>
<body style="background-color: #FFF;">
<div id="editMainDiv" style="font-family: '宋体';">
<ol class="breadcrumb" style="padding-bottom: 0px;">
  <li><a href="javascript:;">推荐算法</a></li>
  <li class="active">基于图书的协同过滤</li>
</ol>
	<div style="padding: 10px; overflow: auto;  max-height: 720px; min-height: 620px; width: 29%; margin-left: 1%; float: left; border: 1px solid #C4C4C4;">
		<div style="padding: 0px;">
			<div style="width: 100%;">
				<h5 style="margin-left: 3px;">算法参数设置</h5>
			</div>
			<div>
				<label style="width: 25%; float: left;">用户信息</label>
				<div style="width: 75%; float: left;" class="input-control has-label-left">
					<input type="text" class="form-control"  v-model="inputValue" style="padding-left: 110px;"/>
					<label class="input-control-label-left" style="width: 110px; margin-left: 6px;">查询用户姓名:</label>
					<select class="form-control" v-model="reqModel.userGuid">
						<option v-for="v in selectOptArr" :value="v.id">{{v.name}}【{{v.id}}】</option>
					</select>
				</div>
				<label style="width: 25%; float: left; margin-top: 8px;">相似度算法</label>
				<div style="width: 75%; float: left; margin-top: 8px;">
					<select class="form-control" v-model="reqModel.similarityType">
						<option value="0">余弦相似度</option>
						<option value="1">欧式距离相似度</option>
						<option value="2">皮尔森相似度</option>
						<option value="3">曼哈顿距离相似度</option>
						<option value="4">对数似然相似度</option>
					</select>
				</div>
				<label style="width: 25%; float: left; margin-top: 8px;">推荐数据个数</label>
				<div style="width: 75%; float: left; margin-top: 8px;">
					<input type="text" class="form-control" v-model="reqModel.maxSize"/>
				</div>
			</div>
			<div style="width: 100%; margin-top: 50px; float: left; text-align: center;">
				<button type="button" @click="algorithmAnalyse" class="btn btn-success" style="width: 30%;">开始推荐</button>
			</div>
		</div>
	</div>
	<div style="padding: 10px; width: 68%; margin-left: 1%; float: left; border: 1px solid #C4C4C4; max-height: 720px; min-height: 620px;">
		<div style="width: 100%;">
			<h5 style="margin-left: 3px;">推荐结果（猜你喜欢）</h5>
		</div>
		<template v-if="isAnalyse == 2">
		<div style="width: 100%; margin-top: 15px; font-family: '宋体'; font-size: 14px;">
			<div style="float: left; width: 20%; margin-left: 20px;;"><font>用户名称：</font></div>
			<div style="float: left; width: 75%;"><font>{{analyseResultModel.userName}}</font></div>
		</div>
		<div style="width: 100%; margin-top: 15px; font-family: '宋体'; font-size: 14px;">
			<div style="float: left; width: 20%; margin-left: 20px;"><font>图书个数：</font></div>
			<div style="float: left; width: 75%;"><font>{{analyseResultModel.bookNum == null ? 0 : analyseResultModel.bookNum}} 本</font></div>
		</div>
		<div style="width: 100%; float: left;" v-if="analyseResultModel.books != null && analyseResultModel.books.length != 0"  class="cards">
			<a class="card" v-for="data in analyseResultModel.books" style="margin-bottom: 15px ;text-decoration: none; float: left; height: 160px; width: 23.5%; margin-left: 0.5%;" href="javascript:;">
				<div class="card-heading"><strong>{{data.name}}</strong></div>
				<div class="card-content text-muted">图书作者：{{data.author}}</div>
				<div class="card-content text-muted">图书价格：￥{{data.price}}</div>
				<div class="card-content text-muted">索书号：{{data.callNumber}}</div>
				<div class="card-content text-muted">出版社：{{data.publishingHouse}}</div>
			</a>
		</div>
		<div v-if="analyseResultModel.books == null || analyseResultModel.books.length == 0" style="width: 100%;">无推荐图书信息!</div>
		</template>
		<template v-if="isAnalyse == 0">
			<div style="margin-top: 150px; text-align: center; font-family: '宋体'; font-size: 22px;">
				暂无推荐结果
			</div>
		</template>
		<template v-if="isAnalyse == 1">
			<div style="margin-top: 150px; text-align: center; font-family: '宋体'; font-size: 22px;">
				正在进行推荐分析, 请稍后...
			</div>
		</template>
	</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
const BASE_PATH = [[@{/}]];
const URLS = {
	APIS: {
		USER_LIST: BASE_PATH+'/restful/user/findAll',
		ALGORITHM_ANALYSE: BASE_PATH+'/restful/algorithm/cf/itemBasedRecommender'
	},
	PAGES: {
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#editMainDiv',
	data: {
		reqModel: {
			userGuid: '',
			maxSize: 10,
			similarityType: 0
		},
		userList: [],
		analyseResultModel: {
			
		},
		isAnalyse: 0,
		inputValue: ''
	},
	methods: {
		init: function() {
			let _this = this;
			axios.get(URLS.APIS.USER_LIST)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					app.userList = data;
				}
			}).catch(function (error) {
			});
		},
		algorithmAnalyse: function() {
			let reqParam = app.reqModel;
			app.isAnalyse = 1;
			axios.post(URLS.APIS.ALGORITHM_ANALYSE, reqParam)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					app.isAnalyse = 2;
					app.analyseResultModel = data;
				} else {
					app.isAnalyse = 0;
					layer.alert(data.message);
				}
			}).catch(function (error) {
			});
		}
	},
	mounted: function() {
		this.init();
	},
	computed: {
		selectOptArr: function() {
			let _this = this;
			let inputValue = _this.inputValue;
			let userList = _this.userList;
			if (inputValue == null || inputValue == '') {
				return userList;
			}
			let resultArr = [];
			for (var i = 0, len = userList.length; i < len; i++) {
				if(userList[i].name.search(inputValue) != -1){
					resultArr.push(userList[i]);
                }
			}
			return resultArr;
		}
	}
});
</script>
<style>
.indexCard {
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .4s cubic-bezier(.175, .885, .32, 1);
    height: 150px;
    width: 23%;
    margin-left: 1%;
}
.indexCard .card-heading {
	display: block;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.indexCard .card-content {
    padding: 0 10px 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
</html>